<template>
    <div>
        <ul id="title">
            <li v-for="(title, index) in titles" :key="index">
                {{ title }}
            </li>
        </ul>
        
        <Content/>
    </div>
</template>


<script>
    import Content from "./Content.vue"

    export default {
        name: "Article", // 指定组件名
        data: function () {
            return {
                titles: [
                    "热门茶博会",
                    "品牌招商",
                    "新品推荐",
                    "优秀茶叶师",
                ]
            }
        },
        components: {
            Content,
        }
    }

</script>

<style lang="less" scoped>
    * {
        list-style: none;
    }

    #title {
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0 0 0;
        padding: 0;
        background-color: #fff;

        li {
            display: inline-block;
            width: 25vw;
            height: 25px;
            text-align: center;
            color: rgba(124, 122, 122, .5);
            font-size: 14px;
        }

        li:active {
            color: rgb(54,117,28);
            border-bottom: 2px solid rgb(54,117,28);
        }
    }
</style>